<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="wro/testPage.css" />
</head>
<body>
	<h2>Web Resource Optimizer Test Application</h2>
	
	
	<div id="module-font">
	   <h3>Font Module</h3>
	   <p class="riesling">
	      This paragraph should have riesling font
	   </p>
	</div>
	<div id="module-import">
	   <h3>@Import Module</h3>
	   <p>
	       This module proves that cssUrlRewriting processor correctly works with @import statements. 
	   </p>
	</div>
	<div id="module-random-css">
       <h3 class="random-color">Random CSS (should have random color)</h3>
       <p class="random-background">
          This paragraph has random background
       </p>
    </div>
	
	<div id="webapp1"></div>
	<div id="classpath">
		<p>ClasspathResource: red!</p>
		<ul>
			<li>Item1</li>
			<li>Item2</li>
			<li>Item3</li>
			<li>Item4</li>
		</ul>
		<p>The container below should have a background referring context relative image</p>
		<div class="contextRelative">
		</div>
	</div>
	<div id="dependency-classpath">
		<p>Resource located in a resource of some dependency (jar) You
			should see some pinguins here.</p>
		<ul>
			<li>Item1</li>
			<li>Item2</li>
			<li>Item3</li>
			<li>Item4</li>
		</ul>
	</div>
	<div id="fileFromDisk">DiskResource: blue!</div>
	<div id="webapp">ServletContext webapp: green!</div>
	<div id="test">
		All IE and Opera 10 will be Red <br> Chrome will be green <br>
		Firefox will be blue
	</div>
	<hr />
	<div class="inlineHelp">Inline Help</div>
	<h1>Css Variables example</h1>

	<h2>The elements in the below container are styled using css
		variables</h2>
	<div id="variablesHolder">
		<em>This element has alt1-background</em>
		<p>Paragraph has some image background</p>
		<span>Span has alt3-background</span>
	</div>
	<div id="webinf">
		<p>Social network icons, used to prove that css located under
			WEB-INF folder rewrite urls correctly</p>
		<ul class="clearfix">
			<li class="webinf-ancestor">MySpace</li>
			<li class="webinf-parent">Twitter</li>
			<li class="webinf-sibling">Facebook</li>
			<li class="webinf-child">Youtube</li>
		</ul>
	</div>
	<!--   
	<script type="text/javascript" src="wro1/all.js"></script>
    -->
</body>
</html>
